<template>
  <div id="header">
    <div class="m_header">
      <div class="header_left">
        <div style="margin-left: 10px;margin-top: 5px;">
          <el-icon v-show="$store.iscollapse" style="cursor: pointer;font-size: 30px;color: dodgerblue;" @click="fold()" >
            <Expand />
          </el-icon>
          <el-icon v-show="!$store.iscollapse" style="cursor: pointer;font-size: 30px;color: dodgerblue;" @click="fold()">
            <Fold />
          </el-icon>
        </div>
        <div>
          <div style="font-size: 28px;font-weight: bold;flex: 1;font-family: '微软雅黑';">
            统一用户管理
          </div>
        </div>
      </div>
      <div class="header_right">
        <div>
          <el-dropdown>
            <span
              style="color: white;cursor: pointer;display: flex; align-items: center;justify-content: space-around;width: 100px;"
              class="el-dropdown-link">
              <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
              <span style="font-size: medium;margin-left: 5px;color: deepskyblue;">{{ username }}</span>
              <el-icon class="el-icon--right">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item v-for="item in dropItem" @click="f_menu(item)">
                  <span style="font-size: medium;margin-left: 5px;color: rgb(9, 1, 26);"><el-icon v-if="item.id==1"><UserFilled /></el-icon> <el-icon v-else><CircleCloseFilled /></el-icon> {{ item.name }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { mainStore } from "../store/index";
import { useRouter } from 'vue-router';
import { Expand, Fold, WarnTriangleFilled, ArrowDown } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const $router = useRouter();
const errornumber = ref(0);
const $store = mainStore();
const username = ref('');
onMounted(() => {
  username.value = localStorage.getItem('username');
})
const dropItem = ref([
  {
    id: 1,
    name: '修改密码',
    type: 'changePSWD',
    icon:"Lock"
  },
  {
    id: 2,
    name: '退出系统',
    type: 'exitSYS',
    icon:"Promotion"
  }
])
function f_menu(e) {
  console.log(e);
  if (e.type === 'changePSWD') {
    $router.push({
      name: 'changePWD'
    })
  } else if (e.type === 'exitSYS') {
    ElMessageBox.confirm(
      '是否确定？',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(()=>{
      $router.replace({
        name:'login'
      })
      localStorage.removeItem('token');
      localStorage.removeItem('boardid');
    })
  }
}
function fold() {
  $store.iscollapse = !$store.iscollapse
}

</script>

<style scoped></style>

<style lang='less'>
#header {
  background: url('/img/tbbg.jpg');
  // background-color: #283953;
  color: white;

  .el-dropdown-link:focus-visible {
    outline: unset;
  }

  .m_header,
  .header_left,
  .header_right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
  }

  .header_left,
  .header_right {
    width: 220px;
    justify-content: space-around;
  }

  .device_error {
    color: #F4446F;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #F4446F;
    line-height: 30px;
    width: 100px;
    border-radius: 5px;

    .error_num {
      background-color: #F4446F;
      color: white;
      width: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      border-radius: 10px;
    }
  }
}
</style>